<template>
	<div>
		<h3>ref交互案例</h3>
		<!-- blur:失去焦点 -->
		<input type="text" ref="myinput" v-if="flag" @blur="showButton">
		<button v-else @click="showInput">显示文本框</button>
		{{flag}}
	</div>
</template>

<script>
	export default{
		data(){
			return {
				flag:true
			}
		},
		methods:{
			showButton(){
				this.flag = false
			},
			showInput(){
				this.flag = true
				//延迟的方法：将要执行的代码延迟到DOM元素加载完毕之后执行
				//flag在修改之后，数据被渲染到页面上，此时DOM元素还没有被渲染到页面上，
				//所以需要延迟获取文本框对象的时间，才能拿到文本框对象
				this.$nextTick(function(){
					//自动获取焦点
					this.$refs.myinput.focus();
				})
			}
		},
		
	}
</script>

<style>
</style>
